<template>
  <div class="calculation" v-loading="loading">
    <CTable
      :dataSource="dataSource"
      useDataSource
      :pagination="false"
      border
      :extraTableOption="{ ...extraTableOption, mergeCells: mergeCellsList }"
    >
      <vxe-column title="范围" field="emissionScope" width="120">
        <template #default="scope">
          <span>{{
            scope.row.emissionScope
              ? getI18nNameBySeparator(scope.row.emissionScope, 'task')
              : scope.row.emissionScope
          }}</span>
        </template>
      </vxe-column>
      <vxe-column title="排放类别" field="emissionCategory" width="180">
        <template #default="scope">
          <span>{{
            scope.row.emissionCategory
              ? $t18(`task.${scope.row.emissionCategory}`)
              : scope.row.emissionCategory
          }}</span>
        </template>
      </vxe-column>
      <vxe-column title="温室气体源类型" field="ghgSourceName" min-width="160">
        <template #default="scope">
          <span>{{ empty(scope.row.ghgSourceName) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="排放源" field="sourceName" min-width="140">
        <template #default="scope">
          <span>{{ empty(scope.row.sourceName) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="能源/燃料" min-width="140">
        <template #default="scope" field="materialName">
          <span>{{ empty(scope.row.materialName) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="活动数据" field="activityData" width="130" align="right">
        <template #default="scope">
          <span>{{ empty(numberFormat(scope.row.activityData, 6)) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="单位" field="activityDataUnit" width="110">
        <template #default="scope">
          <span>{{ empty(scope.row.activityDataUnit) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="产生的温室气体" field="gas" width="120">
        <template #default="scope">
          <span>{{ empty(scope.row.gas) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="气体排放量(t)" field="gasEmissions" width="130" align="right">
        <template #default="scope">
          <span>{{ transformUnitKgToT(scope.row.gasEmissions, 5) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="GWP" field="gwp" width="130" align="right">
        <template #default="scope">
          <span>{{ empty(numberFormat(scope.row.gwp)) }}</span>
        </template>
      </vxe-column>
      <vxe-column
        title="碳排放量(tCO₂e)"
        width="140"
        fixed="right"
        field="carbonDioxideEquivalent"
        align="right"
      >
        <template #default="scope">
          <span>{{ transformUnitKgToT(scope.row.carbonDioxideEquivalent, 5) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="占比(%)" fixed="right" width="100" field="proportion">
        <template #default="scope">
          <span>{{ empty(scope.row.proportion) }}</span>
        </template>
      </vxe-column>
      <!-- <vxe-column title="数据质量评分" fixed="right" field="score">
        <template #default="scope">
          <span>{{ empty(scope.row.score) }}</span>
        </template>
      </vxe-column> -->
    </CTable>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, withDefaults, watch } from 'vue';
import { useList } from './useList';
import { CTable } from '@/components/CTable/index';
import { empty, transformUnitKgToT, getI18nNameBySeparator, numberFormat } from '@/utils/index';
interface IProps {
  standard: string;
}
const props = withDefaults(defineProps<IProps>(), {
  standard: ''
});
const { dataSource, extraTableOption, loadData, mergeCellsList, loading } = useList(props);
watch(
  () => props.standard,
  () => {
    loadData();
  }
);
</script>

<style lang="scss" scoped>
.calculation {
  min-height: 80%;
  :deep(.col--last) {
    border-left: 1px solid #ebeff2;
  }
}
</style>
